<template>
  <div>
    <el-container>
      <div class="h">粮仓管理系统</div>
      <div>
        <el-button type="primary" @click="dialogVisible = true" class="btn">添加粮食</el-button>
        <transition name="fade">
          <div v-if="showWelcome" class="welcome-text">
            <span v-for="(char, index) in welcomeMessage" :key="index" class="char">{{ char }}</span>
          </div>
        </transition>
      </div>
      <el-main>
        <el-dialog title="添加新的粮食" :visible.sync="dialogVisible" width="30%" @close="handleDialogClose">
          <el-form :model="newGrain" @submit.native.prevent="addGrain">
            <el-form-item label="粮食名称">
              <el-input v-model="newGrain.name" placeholder="请输入粮食名称"></el-input>
            </el-form-item>
            <el-form-item label="上传图片">
              <div>
                <el-upload class="avatar-uploader" action="http://localhost:8080/upload" :show-file-list="false"
                  :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" name="image"
                  :on-progress="handleUploadStart" :on-error="handleUploadError" v-loading="uploading">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="addGrain">确认</el-button>
              <el-button @click="handleDialogClose">取消</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>

        <el-card class="box-card" v-for="(grain, index) in grains" :key="index"
          :style="{ backgroundImage: `url(${grain.image})` }">
          <div style="width: 100%; height: 380px;" @click="handlePage('/grain', grain.name,grain.image)">
            <div slot="header" class="clearfix">
              <h2>{{ grain.name }}</h2>
            </div>
            <div class="text item">
            </div>
          </div>
        </el-card>
      </el-main>
      <el-footer style="height: 9vh;">底部</el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    this.showWelcome = true
    setInterval(() => {
      this.showWelcome = false
      setTimeout(() => {
        this.showWelcome = true
      }, 500)
    }, 3500)
    this.loadGrains()
  },
  data () {
    return {
      imageUrl: '',
      showWelcome: false,
      welcomeMessage: '欢迎来到粮仓管理系统'.split(''),
      dialogVisible: false,
      newGrain: {
        name: '',
        image: ''
      },
      grains: [],
      uploading: false
    }
  },
  watch: {
    dialogVisible (newVal) {
      if (!newVal) {
        this.resetForm()
      }
    }
  },
  methods: {
    addGrain () {
      if (this.newGrain.name) {
        this.grains.push({ name: this.newGrain.name, image: this.imageUrl })
        this.dialogVisible = false
        this.saveGrains() // 本地持久化
        this.resetForm()
      }
    },
    resetForm () {
      this.newGrain.name = ''
      this.imageUrl = ''
      this.uploading = false
    },
    handleDialogClose () {
      this.dialogVisible = false
      this.resetForm()
    },
    saveGrains () {
      localStorage.setItem('grains', JSON.stringify(this.grains))
    },
    loadGrains () {
      const storedGrains = localStorage.getItem('grains')
      if (storedGrains) {
        this.grains = JSON.parse(storedGrains)
      }
    },
    handlePage (path, name, image) {
      this.$router.push({ path, query: { name, image } })
    },
    handleAvatarSuccess (res) {
      // 保存图片路径
      this.imageUrl = res.data
      this.uploading = false
      this.$message.success('上传成功')
    },
    handleUploadStart () {
      this.uploading = true
    },
    handleUploadError () {
      this.uploading = false
      this.$message.error('上传失败')
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
.h {
  background-color: #B3C0D1;
  color: #000000;
  text-align: center;
  line-height: 60px;
  font-size: 30px;
}

.el-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  background-color: #E9EEF3;
  color: #333;
  padding: 20px;
  height: 75.5vh;
}
.el-footer {
  background-color: #afbfcf;
}

body>.el-container {
  margin-bottom: 40px;
}

.text {
  font-size: 14px;
  color: black;
  font-weight: bold;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  margin-bottom: 10px;
  padding: 5px 0;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-container .el-main .box-card {
  width: 23%;
  margin-bottom: 20px;
  height: 400px;
  background-size: cover;
  background-position: center;
  transition: transform 0.3s ease-in-out;
}

.el-container .el-main .box-card:hover {
  transform: scale(1.05);
}

.btn {
  display: inline-block;
  width: 10%;
  height: 50px;
}

.avatar-uploader .el-upload {
  /* border: 1px dashed #d9d9d9; */
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-icon-plus {
  border: 1px dashed rgb(201, 185, 185);
}

.el-card {
  margin-left: 25px;
  cursor: pointer;
}

.welcome-text {
  margin-left: 20px;
  font-size: 20px;
  color: #333;
  display: inline-block;
}

.char {
  opacity: 0;
  display: inline-block;
  animation: fadeInChar 1s ease-in-out forwards;
}

.char.fade-leave-active {
  animation: fadeOutChar 1s ease-in-out forwards;
}

.char:nth-child(1) {
  animation-delay: 0.1s;
}

.char:nth-child(2) {
  animation-delay: 0.2s;
}

.char:nth-child(3) {
  animation-delay: 0.3s;
}

.char:nth-child(4) {
  animation-delay: 0.4s;
}

.char:nth-child(5) {
  animation-delay: 0.5s;
}

.char:nth-child(6) {
  animation-delay: 0.6s;
}

.char:nth-child(7) {
  animation-delay: 0.7s;
}

.char:nth-child(8) {
  animation-delay: 0.8s;
}

.char:nth-child(9) {
  animation-delay: 0.9s;
}

.char:nth-child(10) {
  animation-delay: 1s;
}

.char:nth-child(11) {
  animation-delay: 1.1s;
}

.char:nth-child(12) {
  animation-delay: 1.2s;
}

@keyframes fadeInChar {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOutChar {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}

</style>
